<template>
  <Dialog v-model="dialogVisible" title="督导检查详情" width="800px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="督导标题">
        {{ supervisionData.supervisionTitle || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="督导类型">
        <el-tag>{{ getTypeName(supervisionData.supervisionType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="督导对象">
        {{ supervisionData.supervisionObject || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="督导时间">
        {{ supervisionData.supervisionTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="督导员">
        {{ supervisionData.supervisor || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusColor(supervisionData.status)">
          {{ getStatusName(supervisionData.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="督导内容" :span="2">
        <div style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;">
          {{ supervisionData.supervisionContent || '-' }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="督导结果" :span="2" v-if="supervisionData.supervisionResult">
        <div style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;">
          {{ supervisionData.supervisionResult }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ supervisionData.createTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="完成时间" v-if="supervisionData.completeTime">
        {{ supervisionData.completeTime }}
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const supervisionData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '现场督导', 2: '远程督导', 3: '专项督导' }
  return typeMap[type] || '-'
}

const getStatusName = (status: number) => {
  const statusMap = { 0: '计划中', 1: '进行中', 2: '已完成', 3: '已取消' }
  return statusMap[status] || '-'
}

const getStatusColor = (status: number) => {
  const colorMap = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
  return colorMap[status] || 'info'
}

const open = (data: any) => {
  dialogVisible.value = true
  supervisionData.value = data
}

defineExpose({ open })
</script> 